<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>点亮中国</title>

    <head>
        <script src="js/echarts.min.js"></script>
        <script src="js/china.js"></script>
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <div id="mychart" style="width: 800px; height: 600px;">
        </div>

    </body>
    <script>
        var mychart = echarts.init(document.getElementById("mychart"));
        mychart.showLoading();
        $.ajax({
            url:"data/weibo.json",
            type:"get",
            async:true,
            dataType:"json",
            success:function(resp) {
                mychart.hideLoading();
                Data = function (index) {
                    var mapdata = resp[index];
                    var px = mapdata[0]/1000;
                    var py = mapdata[1]/1000;
                    var res = [[px,py]];
                    for (var i=2;i<mapdata.length;i+=2) {
                        var dx = mapdata[i]/1000;
                        var dy = mapdata[i+1]/1000;
                        res.push([px+dx,py+dy]);
                        px +=dx;
                        py +=dy;

                    }
                    return res;
                };
                mychart.setOption({
                    backgroundColor:"404a59",
                    title : {
                        text: "点亮中国",
                        left:"center",
                        top:10
                    },
                    legend:{
                        left:"left",
                        data:['强','中','弱'],
                        textStyle:{
                            color:"#ccc"
                        }
                    },
                    geo:{
                        name:'强',
                        type:'scatter',
                        map:'china',
                        label:{
                            emphasis:{
                                show:false
                            }
                        },
                        itemStyle:{
                            normal:{
                                areaColor:"#323c48",
                                borderColor:"#111"
                            },
                            emphasis:{
                                areaColor:"#2a333d"
                            }
                        }
                    },
                    series:[{
                        name:'弱',
                        type:'scatter',
                        coordinateSystem: 'geo',
                        symbolSize:1,
                        large:true,
                        itemStyle:{
                            normal:{
                                shadowBlur:2,
                                shadowColor:'rgba(37,140,249,0.8)',
                                color:'rgba(37,140,249,0.8)'
                            }
                        },
                        data:Data(0)
                    },{
                        name:'中',
                        type:'scatter',
                        coordinateSystem: 'geo',
                        symbolSize:1,
                        large:true,
                        itemStyle:{
                            normal:{
                                shadowBlur:2,
                                shadowColor:'rgba(14,241,242,0.8)',
                                color:'rgba(14,241,242,0.8)'
                            }
                        },
                        data:Data(1)
                    },{
                        name:'强',
                        type:'scatter',
                        coordinateSystem: 'geo',
                        symbolSize:1,
                        large:true,
                        itemStyle:{
                            normal:{
                                shadowBlur:2,
                                shadowColor:'rgba(255,255,255,0.8)',
                                color:'rgba(255,255,255,0.8)'
                            }
                        },
                        data:Data(2)
                    }
                    ]
                });
            }
        });
    </script>
</html>